<template>
    <div class="container">
        <!-- 首页头部 -->
        <div class="container-top">
            <div class="header">
                <h3 class="line">报警</h3>
            </div>
            <el-skeleton animated :rows=1 :loading="loading" :throttle=300>
                <template slot="template">
                    <el-skeleton-item variant="li" />
                    <el-skeleton-item variant="li" />
                    <el-skeleton-item variant="li" />
                    <el-skeleton-item variant="li" />
                    <el-skeleton-item variant="li" />
                    <el-skeleton-item variant="li" />
                </template>
                <template>
                    <ul style="margin-left:20px ;">
                        <li @click="handleserverActive">
                            <div class="panel_icon"></div>
                            <h1>{{ firstRowData.serverActiveNumber }}</h1>
                            <p>{{ firstRowTitle.serviceSurvivalTitle }}</p>
                        </li>
                        <li @click="handleApi">
                            <i class="panel_icon"></i>
                            <h1>{{ firstRowData.apiNumber }}</h1>
                            <p>{{ firstRowTitle.interfaceTitle }}</p>
                        </li>
                        <li @click="handleServer">
                            <i class="panel_icon"></i>
                            <h1>{{ firstRowData.serverNumber }}</h1>
                            <p>{{ firstRowTitle.serverTitle }}</p>
                        </li>
                        <li @click="handleSqlserver">
                            <i class="panel_icon"></i>
                            <h1>{{ firstRowData.sqlServerNumber }}</h1>
                            <p>{{ firstRowTitle.sqlServerTitle }}</p>
                        </li>
                        <li @click="handleMysql">
                            <i class="panel_icon"></i>
                            <h1>{{ firstRowData.mysqlNumber }}</h1>
                            <p>{{ firstRowTitle.mysqlTitle }}</p>
                        </li>
                    </ul>
                    <ul style="margin-left:20px ;" class="ul">
                        <li @click="handleElasticsearch">
                            <i class="panel_icon"></i>
                            <h1>{{ firstRowData.elasticsearchNumber }}</h1>
                            <p>{{ firstRowTitle.elasticsearchTitle }}</p>
                        </li>
                        <li @click="handleMongodb">
                            <i class="panel_icon"></i>
                            <h1>{{ firstRowData.mongodbNumber }}</h1>
                            <p>{{ firstRowTitle.mongodbTitle }}</p>
                        </li>
                        <li @click="handleRabbitmq">
                            <i class="panel_icon"></i>
                            <h1>{{ firstRowData.rabbitmqNumber }}</h1>
                            <p>{{ firstRowTitle.rabbitmqTitle }}</p>
                        </li>
                        <li @click="handleRedis">
                            <i class="panel_icon"></i>
                            <h1>{{ firstRowData.redisNumber }}</h1>
                            <p>{{ firstRowTitle.redisTitle }}</p>
                        </li>
                        <li style="opacity: 0;">

                        </li>
                    </ul>
                </template>
            </el-skeleton>
        </div>
    </div>
</template>

<script>
import { homeList } from "@/api/home.js"
export default {
    data() {
        return {
            loading: false,
            firstRowData: {
                serverActiveNumber: "",
                apiNumber: "",
                serverNumber: "",
                sqlServerNumber: "",
                mysqlNumber: "",
                elasticsearchNumber: "",
                mongodbNumber: "",
                rabbitmqNumber: "",
                redisNumber: ""
            },
            firstRowTitle: {
                serviceSurvivalTitle: '服务',
                interfaceTitle: '接口',
                serverTitle: '服务器',
                sqlServerTitle: 'sql server',
                mysqlTitle: 'mysql',
                elasticsearchTitle: 'elasticsearch',
                mongodbTitle: "mongodb",
                rabbitmqTitle: "rabbitmq",
                redisTitle: "redis"
            }
        }
    },
    mounted() {
        this.handleHomeList();
    },
    methods: {
        handleHomeList() {
            this.loading = true;
            homeList().then(res => {
                console.log('res1111111', res)
                if (res.success) {
                    this.firstRowData = res.result;
                }
            })
            this.loading = false;
        },
        handleserverActive() {
            this.$router.push('./serviceSurviveLog')
        },
        handleApi() {
            this.$router.push('./interfaceAvailableLog')
        },
        handleServer() {
            this.$router.push('./serverRecord')
        },
        handleSqlserver() {
            this.$router.push('./sqlserverRecord')
        },
        handleMysql() {
            this.$router.push('./mysqlRecord')
        },
        handleElasticsearch() {
            this.$router.push('./elasticsearchRecord')
        },
        handleMongodb() {
            this.$router.push('./mongodbRecord')
        },
        handleRabbitmq() {
            this.$router.push('./rabbitmqRecord')
        },
        handleRedis() {
            this.$router.push('./redisRecord')
        }
    }
}
</script>

<style scoped lang="scss">
.container {
    height: calc(100vh - 120px);
    overflow-y: auto;

    .container-top {
        // border:2px solid #eee;
        padding-bottom: 5px;

        .header {
            h3 {
                font-weight: bold;
            }
        }

        .line::before {
            content: " ";
            width: 4px;
            height: 20px;
            background: #3C77FF;
            display: inline-block;
            vertical-align: middle;
            margin: 0px 5px;
        }

        ul {
            display: flex;
            justify-content: space-between;
            margin: 15.5px 35px 15px 0;

            li {
                width: 240px;
                height: 140px;
                background-size: 100% 100%;
                list-style: none;
                position: relative;
                box-shadow: 10px 2px 9px 1px #D4E6FF;
                border-radius: 6px;

                p {
                    color: #333;
                    font-size: 16px;
                    white-space: nowrap;
                    text-align: left;
                    position: absolute;
                    bottom: 33%;
                    width: 80%;
                    left: 10%;
                }

                h1 {
                    top: 28%;
                    left: 10%;
                    width: 80%;
                    position: absolute;
                    text-align: left;
                    color: #333;
                    font-size: 24px;
                }
            }
        }

        ::v-deep .el-skeleton {
            display: flex;
            justify-content: space-between;
            margin: 15.5px 35px 15px 0;
            padding: 0 40px;

            .el-skeleton__li {
                width: 14.29%;
                height: 114px;
            }
        }
    }

    .container-top li .panel_icon {
        width: 58px;
        height: 58px;
        background-size: cover;
        position: absolute;
        top: 40px;
        right: 30px;
    }

    .container-top li:nth-child(1) {
        // background: url(@/assets/images/sddbj-bg.png) no-repeat;
        // background-size: 100% 100%;
        background-color: #F6FAFE;
    }

    .container-top li:nth-child(1) .panel_icon {
        background: url(@/assets/img/server.png) no-repeat;
        background-size: cover;
    }

    .container-top li:nth-child(2) {
        // background: url(@/assets/images/img_bg2.png) no-repeat;
        // background-size: 100% 100%;
        background-color: #F6FAFE;
    }

    .container-top li:nth-child(2) .panel_icon {
        background: url(@/assets/img/api.png) no-repeat;
        background-size: cover;
    }

    .container-top li:nth-child(3) {
        // background: url(@/assets/images/img_bg3.png) no-repeat;
        // background-size: 100% 100%;
        background-color: #F6FAFE;
    }

    .container-top li:nth-child(3) .panel_icon {
        background: url(@/assets/img/service.png) no-repeat;
        background-size: cover;
    }

    .container-top li:nth-child(4) {
        // background: url(@/assets/images/img_bg4.png) no-repeat;
        // background-size: 100% 100%;
        background-color: #F6FAFE;
    }

    .container-top li:nth-child(4) .panel_icon {
        background: url(@/assets/img/sqlserver.png) no-repeat;
        background-size: cover;
    }

    .container-top li:nth-child(5) {
        // background: url(@/assets/images/img_bg5.png) no-repeat;
        // background-size: 100% 100%;
        background-color: #F6FAFE;
    }

    .container-top li:nth-child(5) .panel_icon {
        background: url(@/assets/img/mysql.png) no-repeat;
        background-size: cover;
    }

    .ul li:nth-child(1) {
        // background: url(@/assets/images/dmjfk-bg.png) no-repeat;
        // background-size: 100% 100%;
        background-color: #F6FAFE;
    }

    .ul li:nth-child(1) .panel_icon {
        background: url(@/assets/img/es.png) no-repeat;
        background-size: 100% 100%;
    }

    .ul li:nth-child(2) {
        // background: url(@/assets/images/dkfp-bg.png) no-repeat;
        // background-size: 100% 100%;
        background-color: #F6FAFE;
    }

    .ul li:nth-child(2) .panel_icon {
        background: url(@/assets/img/mongodb.png) no-repeat;
        background-size: 100% 100%;
    }

    .ul li:nth-child(3) {
        // background: url(@/assets/images/yjdcl-bg.png) no-repeat;
        // background-size: 100% 100%;
        background-color: #F6FAFE;
    }

    .ul li:nth-child(3) .panel_icon {
        background: url(@/assets/img/rabbitmq.png) no-repeat;
        background-size: 100% 100%;
    }

    .ul li:nth-child(4) {
        // background: url(@/assets/images/img_bg1.png) no-repeat;
        // background-size: 100% 100%;
        background-color: #F6FAFE;
    }

    .ul li:nth-child(4) .panel_icon {
        background: url(@/assets/img/redis.png) no-repeat;
        background-size: 100% 100%;
    }
}
</style>